* {
	margin: 0;
	padding: 0;
}

.dropDawn-wrapper {
	width: 375px;
	height: 665px;
	margin: 0 auto;
	background-color: #ccc;
}

#checkbox {
	display: none;
}

/* x 修改线条的旋转，使其变为x */
#checkbox:checked + .main .header .menu .line:nth-child(1) {
	top: 18px;
	/* transform: translateY(-50%) rotate(45deg); */
	transform: rotate(45deg);
	transition: top 0.2s ease-in-out, transform 0.3s ease-in-out 0.2s;
}
#checkbox:checked + .main .header .menu .line:nth-child(2) {
	bottom: 18px;
	transform: rotate(-45deg);
	transition: bottom 0.2s ease-in-out, transform 0.3s ease-in-out 0.2s;
}

/* x 修改ul的scaleY使其扩大 */
#checkbox:checked + .main .contain {
	transform: scaleY(1);
	opacity: 1;
}

.header {
	/* position: relative; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 60px;
	background-color: #000;
}
.menu {
	position: relative;
	width: 50px;
	height: 40px;
}
.menu .line {
	position: absolute;
	width: 30px;
	height: 4px;
	left: 10px;
	background-color: #fff;
	transition: top 0.2s ease-in-out 0.2s, bottom 0.2s ease-in-out 0.2s,
		transform 0.2s ease-in-out;
}
.menu .line:nth-child(1) {
	top: 10px;
}
.menu .line:nth-child(2) {
	bottom: 10px;
}

/* x 设置ul的样式 */
.contain {
	box-sizing: border-box;
	padding-top: 1em;
	padding-left: 1em;
	width: 70%;
	height: 100vh;
	background-color: #333;
	transform: scaleY(0);
	transform-origin: left top;
	transition: all 0.5s ease-in-out;
	list-style: none;
	color: #fff;
	line-height: 2em;
	opacity: 0;
}
